<template>
  <div class="kyc-up_load">
    <el-upload
        action=""
        style="float: left"
        :show-file-list="false"
        ref="upload"
        list-type="picture-card"
        :on-error="handleError"
        :before-upload="onBeforeUploadImage"
        :http-request="fileUploadChange"
        multiple>
      <div class="llt-upload_title" v-if="imageUrl">
        <img class="llt-upload_img" :src="imageUrl"/>
      </div>
      <div class="llt-upload_title" v-else>
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>
    <p class="llt-upload_pre">
      <a v-if="!!imageUrl" @click="showBase64">预览</a>
    </p>
  </div>
</template>

<script>
export default {
  name: "upload",
  props: {
    imageUrl: {
      type: String,
      default: ''
    },
    disabledFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formTitle: ''
    }
  },
  methods: {
    showBase64(){
      this.$emit('bigimg',this.imageUrl);
    },

    /***
     *文件上传失败回调
     *auth: FSG
     ***/
    handleError() {
      this.$refs.upload.clearFiles();
    },
    /***
     *上传
     *前置校验
     *auth: FSG
     ***/
    onBeforeUploadImage(file) {
      let isLt5M = null;
      let fileError = '';
      isLt5M = file.size / 1024 / 1024 < 5;
      fileError = '上传文件大小不能超过5MB!';

      const isImage = ['image/jpeg', 'image/jpg', 'image/png'].indexOf(file.type) > -1;
      if (!isImage) {
        this.$message.error('请上传jpg，jpeg，png格式文件!');
      }
      if (!isLt5M) {
        this.$message.error(fileError);
      }
      return isImage && isLt5M
    },
    fileUploadChange(file) {
      this.$emit('upload-file', file, this.$refs.upload);
    }
  }
}
</script>

<style lang="scss">
.kyc-up_load {
  float: left;
  margin-bottom: 0px;
  height: 110px;

  .el-upload--picture-card, .llt-upload_title {
    width: 100px;
    height: 100px;
    position: relative;
    i {
      position: absolute;
      left: 36px;
      top: 30px;
    }
    span{
      position: absolute;
      left: 0;
      height: 20px;
      width: 100%;
      text-align: center;
      color: #b2b2af;
    }
  }

  .el-upload_card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .llt-upload_img {
    height: 80px;
    opacity: 0.3;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .llt-upload_pre {
    margin: 0;
    text-align: center;
    color: #ffb100;
    height: 30px;

    a {
      font-size: 14px;
    }
  }

  .el-upload-dragger {
    width: 100%;
    height: 100%;
  }
}
</style>
